<template>
  <div>
    <el-breadcrumb separator="/" style="padding-left:10px;paddingbottom:10px;font-size:12px;">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 用户列表卡片区 -->
    <el-card>
      <el-form :inline="true" :model="formInline" ref="formInline_ref">
        <el-form-item label="部门" label-width="auto">
          <el-select clearable v-model="formInline.department" placeholder="请选择" >
            <el-option
              v-for="item in departments"
              :key="item.id"
              :label="item.name"
              :value="item.id">
              <span style="float: left">{{ item.name }}</span>
<!--              <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.id }}</span>-->
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" label-width="auto">
          <el-input clearable v-model="formInline.user"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="auto">
          <el-input clearable v-model="formInline.email"></el-input>
        </el-form-item>

        <el-form-item label="昵称" label-width="auto">
          <el-input clearable v-model="formInline.nickname"></el-input>
        </el-form-item>

      </el-form>
      <el-form class="form_button">
        <el-form-item style="margin-left:50px;">
          <el-button @click="reset" icon="el-icon-refresh">重置</el-button>
          <el-button type="primary" @click="" icon="el-icon-search">查询</el-button>
          <el-button
            type="success"
            icon="el-icon-plus"
            @click="insertUser"
          >添加</el-button>
          <el-button @click="downExcel" icon="el-icon-download">导出</el-button>
        </el-form-item>
      </el-form>
      <!--表格-->
      <el-table
        :data="userList"
        border
        style="width: 100%"
        height="450">
        <el-table-column
          prop="username"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="nickname"
          label="昵称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
          width="180">
        </el-table-column>
        <el-table-column
          prop="phoneNumber"
          label="联系电话"
          width="180">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="180">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="120">
        </el-table-column>

        <el-table-column
          prop="type"
          label="类型"
          width="120">
        </el-table-column>
        <el-table-column
          prop="departmentId"
          label="部门"
          width="120">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="220">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="primary" size="mini" icon="el-icon-star-on"></el-button>
            <el-button type="success" icon="el-icon-edit" size="mini"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top:10px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    <!-- 新增的弹出框-->
    <el-dialog
      title="新增用户"
      :visible.sync="insertDialogVisible"
      width="50%"
      >
      <el-form :model="UserForm"  ref="UserForm" label-width="100px" class="demo-ruleForm">
        <el-col :span="12">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="UserForm.username"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="UserForm.nickname"></el-input>
        </el-form-item>
        </el-col>
        <el-form-item  >
          <el-col :span="12">
            <el-form-item prop="email" label="电子邮件">
              <el-input v-model="UserForm.email"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="phoneNumber" label="电话">
              <el-input v-model="UserForm.phoneNumber"></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="密码" required>
          <el-col :span="12">
            <el-form-item prop="password">
              <el-input v-model="UserForm.password"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="birth">
              <el-input v-model="UserForm.birth"></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>

      </el-form>
    <el-button @click="insertDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveUserInfo">确 定</el-button>

    </el-dialog>
  </div>
</template>
<script>
import {findUserList} from "@/api/users";
import {findAllDept} from "@/api/department"

export default {
  name: 'Users',
  data () {
    return {
      radio: '1',
      formInline: {
        department:'',
        user: '',
        email: '',
        nickname:'',
        sex:''
      },
      departments:[],
      userList:[],
      currentPage4: 1,
      pageSize:6,
      total:0,
      insertDialogVisible:false,
      UserForm:{}
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage4 = val;
      this.getUserList(val,this.pageSize);
      console.log(`当前页: ${val}`);
    },
    async getUserList(val,pageSize){
      const {data} = await findUserList(val,pageSize);

      this.userList = data.data.records;
      this.total = data.data.total;
    },
    downExcel(){

    },
    handleClick(){

    },
    insertUser(){
      this.insertDialogVisible = true;
    },
    reset(){
      this.formInline={};
    },
    async getAllDept() {
      const {data} = await findAllDept();
      console.log(data.data.departments);
      this.departments = data.data.departments;
    },
    saveUserInfo(){

    }

  },
  created() {
    this.getUserList();
    this.getAllDept();
  }
}
</script>
<style scoped>
.form_button{
  text-align: center;

}

</style>

